<template>
  <div class="home-hot">
    <HomePanel sub-title="人气爆款 不容错过" title="人气推荐">
      <template #right>
        <XtxMore></XtxMore>
      </template>

      <!-- 面板内容 -->
      <!-- 给Transition内置组件套一层div, 是为了保证fade的父元素有定位, 构成子绝父相 -->
      <div ref="target" style="position: relative">
        <Transition name="fade">
          <template #default>
            <ul v-if="goods.length" class="goods-list">
              <li v-for="item in goods" :key="item.id">
                <router-link class="info" to="/">
                  <img v-lazy="item.picture" alt="">
                  <p class="name ellipsis">{{ item.title }}</p>
                  <p class="alt">{{ item.alt }}</p>
                </router-link>
              </li>
            </ul>
            <HomeSkeleton v-else></HomeSkeleton>
          </template>
        </Transition>
      </div>
    </HomePanel>
  </div>
</template>

<script>
import HomePanel from '@/components/home/HomePanel'
import API from '@/api/home'
import { ref } from 'vue'
import HomeSkeleton from '@/components/home/HomeSkeleton'
import { useLazyData } from '@/hooks'

export default {
  name: 'HomeHot',
  components: {
    HomeSkeleton,
    HomePanel
  },
  setup() {
    // const goods = ref([])

    // API.getHotRecommend()
    //   .then((res) => {
    //     goods.value = res.result
    //   })

    // 1.target 去绑定一个监听对象, 最好是DOM
    // 2.传入API函数, 内部获取调用, 返回的是ref响应式对象
    const {
      // 解构赋值获取到的属性, 重命名形式
      result: goods,
      target
    } = useLazyData(API.getHotRecommend)

    return {
      target,
      goods
    }
  }
}
</script>

<style lang="less" scoped>

.home-hot {
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 426px;

    li {
      width: 306px;
      height: 406px;
      .hoverShadow();

      a {
        width: 100%;
        height: 100%;
        display: inline-block;

        img {
          width: 306px;
          height: 306px;
        }

        p {
          font-size: 22px;
          padding: 12px 30px 0 30px;
          text-align: center;
        }

        .alt {
          font-size: 18px;
          color: #999;
        }
      }
    }
  }
}
</style>
